<template>
  <div>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.furnitureName}}</el-checkbox>
  </el-checkbox-group>
  <el-button type="primary" @click="test" style="margin-left: 10px;">确定</el-button>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [], // 保存的家具id
      cities: [], // 家具数据
      isIndeterminate: true,
      
    };
  },
  created(){
    this.getfuList();
  },
  methods: {
    async test(){
      // let a=this.checkedCities.join('_');
      // console.log(a);
      
    },
    handleCheckAllChange(val) {
      // 当全选时，我们需要将所有城市的id添加到checkedCities数组中
      this.checkedCities = val ? this.cities.map(city => city.id) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // 更新checkedCities数组，确保它包含的是被选中城市的id
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    async getfuList(){
      let fu = await this.$http.get('fuinfo/selectAll');
      this.cities = fu.data;
    }
  }
};
</script>